<template>
  <div class="statistics-section">
    <div class="charts-info">
      <div id="statisticsCharts"></div>
      <div class="circular">
        <!-- :style="{ top: screenHeight > 1000 ? '10.4vh' : '10vh' }" -->
        <div class="num">{{ total }}</div>
        <div class="text">总数</div>
      </div>
      <div class="info" v-if="infoList.length > 0">
        <vue3-seamless-scroll
          :list="infoList"
          hover
          wheel
          :limitScrollNum="8"
          class="scroll"
        >
          <div class="li" v-for="(item, index) in infoList" :key="index">
            <span
              class="colorBg"
              :style="`background-color: ${arr1[index % 10]}`"
            ></span>
            <el-tooltip
              effect="dark"
              :content="item.name"
              placement="top-start"
              :disabled="item.name.length < 7"
            >
              <div class="name">{{ item.name }}</div>
            </el-tooltip>
            <div class="textColo">{{ item.value }}</div>
            <div class="textColor">{{ item.accounted }}</div>
          </div>
          <!-- <div class="li blue" v-if="infoList[1]">
          <span class="colorBg"></span>
          <p>{{ infoList[1].name }}</p>
          <p class="textColor">{{ infoList[1].value }}</p>
          <p class="textColor">{{ infoList[1].accounted }}</p>
        </div> -->
        </vue3-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script setup>
import echarts from "@/utils/echarts";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { onMounted, onUnmounted, ref, watch } from "vue";

let statisticsECharts = null;

let screenHeight = ref(document.body.clientHeight);

const deepCopy = (obj) => {
  if (typeof obj !== "object") {
    return obj;
  }
  const newobj = {};
  for (let attr in obj) {
    newobj[attr] = obj[attr];
  }
  return newobj;
};
let arr = [
  "rgb( 88,209,235, 0.4)",
  "rgb(255,182, 68,0.4)",
  "rgb(255,231, 68, 0.4)",
  "rgb(115,178, 41, 0.4)",
  "rgb( 64,196,135, 0.4)",
  "rgb(101,173,255, 0.4)",
  "rgb(101,137,255, 0.4)",
  "rgb(179,133, 68, 0.4)",
  "rgb(107,191,1031, 0.4)",
  "rgb(111,193,169, 0.4)",
];
let arr1 = [
  "rgb( 88,209,235, 1)",
  "rgb(255,182, 68,1)",
  "rgb(255,231, 68, 1)",
  "rgb(115,178, 41, 1)",
  "rgb( 64,196,135, 1)",
  "rgb(101,173,255, 1)",
  "rgb(101,137,255, 1)",
  "rgb(179,133, 68, 1)",
  "rgb(107,191,1031, 1)",
  "rgb(111,193,169, 1)",
];
const startColor = arr;
const endColor = arr;
const borderStartColor = arr1;
const borderEndColor = arr1;
let RealData = [];
let borderData = [];
let total = 0;
let option = {
  tooltip: { show: false },
  grid: {
    top: "center",
    left: "20%",
  },
  xAxis: [{ show: false }],
  yAxis: [{ show: false }],
  series: [
    // 边框的设置
    {
      radius: ["40%", "50%"],
      center: ["50%", "50%"],
      type: "pie",
      itemStyle: {
        // borderColor: 'rgba(0, 0, 0, 0.3)',
        borderWidth: 8,
      },
      label: {
        show: false,
      },
      emphasis: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      emphasis: {
        show: false,
      },
      animation: false,
      tooltip: {
        show: false,
      },
      data: borderData,
    },
    // 主要展示层的
    {
      radius: ["50%", "60%"],
      center: ["50%", "50%"],
      type: "pie",
      //clockWise:false,
      label: {
        show: false,
        position: "outside",
        formatter: (params) => {
          return `${params.name} : {fz|${params.value}} `;
        },
        rich: {
          fz: {
            fontSize: 24,
          },
        },
        overflow: "none",
      },
      labelLine: {
        length: 50,
        show: false,
      },
      data: RealData,
      itemStyle: {
        // borderColor: 'rgba(0, 0, 0, 0.3)',
        borderWidth: 8,
        shadowBlur: 25,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0)",
      },
    },
  ],
};

let timer = null;
let currentIndex = 0;
let disposalData = [];
/**
 * @description: 处置数据统计
 * @param {*} data
 */
const infoList = ref([]);

const accept = async (info) => {
  if (statisticsECharts != null) {
    statisticsECharts.clear();
    statisticsECharts.dispose();
    statisticsECharts = null;
  }
  disposalData = [];
  RealData = [];
  borderData = [];
  disposalData = info;
  // disposalData = [
  //   { name: "核查", value: 50 },
  //   { name: "处置", value: 100 },
  //   { name: "驱离", value: 60 },
  //   { name: "学校", value: 60 },
  // ];
  nextTick(() => {
    initMap();
  });
};
const initMap = () => {
  statisticsECharts = null;
  echarts.init(document.getElementById("statisticsCharts")).dispose();
  statisticsECharts = echarts.init(document.getElementById("statisticsCharts"));

  const xData = [],
    yData = [];
  const data = disposalData;
  total = 0;
  data.map((item, index) => {
    xData.push(item.name);
    yData.push(item.value);
    total += Number(item.value);
    const newobj = deepCopy(item);
    const newobj1 = deepCopy(item);
    RealData.push(newobj);
    borderData.push(newobj1);
  });
  data.map((item, index) => {
    if (item.value == 0) {
      item.accounted = "0%";
    } else {
      let num = Number(item.value) / total;
      num += "";
      if (num.length == 1) {
        item.accounted = "100%";
      } else {
        num = num * 100000;
        item.accounted = Number(num / 1000).toFixed(2) + "%";
      }
    }
  });
  RealData.map((item, index) => {
    item.itemStyle = {
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: startColor[index], // 0% 处的颜色
          },
          {
            offset: 1,
            color: endColor[index], // 100% 处的颜色
          },
        ],
        globalCoord: false, // 缺省为 false
      },
    };
  });
  borderData.map((item, index) => {
    item.itemStyle = {
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: borderStartColor[index % 10], // 0% 处的颜色
          },
          {
            offset: 1,
            color: borderEndColor[index % 10], // 100% 处的颜色
          },
        ],
        globalCoord: false, // 缺省为 false
      },
    };
  });

  infoList.value = data;
  option = {
    tooltip: { show: false },
    grid: {
      top: "center",
      left: "20%",
    },
    xAxis: [{ show: false }],
    yAxis: [{ show: false }],
    series: [
      // 图表中心圆
      // {
      //   name: '',
      //   type: 'pie',
      //   radius: ['7%', '15%'],
      //   silent: true,
      //   clockwise: false,
      //   startAngle: 90,
      //   z: 0,
      //   zlevel: 0,
      //   label: {
      //     normal: {
      //       position: 'center',
      //     },
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: 'rgba(15, 143, 166, 1)',
      //     },
      //   },
      //   data: [1],
      // },
      // 图表中心 齿轮状 分割 图表中心圆
      // {
      //   name: '',
      //   type: 'gauge',
      //   radius: '22%',
      //   center: ['50%', '50%'],
      //   startAngle: 0,
      //   endAngle: 360,
      //   splitNumber: 8,
      //   hoverAnimation: true,
      //   axisTick: {
      //     show: false,
      //   },
      //   splitLine: {
      //     length: 12,
      //     lineStyle: {
      //       width: 3,
      //       color: '#092c52',
      //     },
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: '#0b263f',
      //     },
      //   },
      //   axisLabel: {
      //     show: false,
      //   },
      //   pointer: {
      //     show: false,
      //   },
      //   axisLine: {
      //     lineStyle: {
      //       opacity: 0,
      //     },
      //   },
      //   detail: {
      //     show: false,
      //   },
      //   data: [
      //     {
      //       value: 0,
      //       name: '',
      //     },
      //   ],
      // },
      // 图表 短横圆环
      // {
      //   name: '',
      //   type: 'gauge',
      //   splitNumber: 8,
      //   radius: '60%',
      //   center: ['50%', '50%'],
      //   startAngle: 0,
      //   endAngle: 360,
      //   axisLine: {
      //     show: false,
      //   },
      //   axisTick: {
      //     show: true,
      //     lineStyle: {
      //       color: 'rgba(118, 208, 239, 1)',
      //       width: 2,
      //       shadowBlur: 1,
      //       shadowColor: 'rgba(232, 102, 15, 0.6)',
      //     },
      //     length: 1,
      //     splitNumber: 3,
      //   },
      //   splitLine: {
      //     show: false,
      //   },
      //   axisLabel: {
      //     show: false,
      //   },
      //   detail: {
      //     show: false,
      //   },
      // },
      // 边框的设置
      {
        radius: ["50%", "60%"],
        center: ["50%", "50%"],
        type: "pie",
        label: {
          show: false,
        },
        emphasis: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        emphasis: {
          show: false,
        },
        animation: false,
        tooltip: {
          show: false,
        },
        data: borderData,
      },
      // 主要展示层的
      {
        radius: ["50%", "75%"],
        center: ["50%", "50%"],
        type: "pie",
        //clockWise:false,
        label: {
          show: false,
          position: "outside",
          formatter: (params) => {
            return `${params.name} : {fz|${params.value}} `;
          },
          rich: {
            fz: {
              fontSize: 24,
            },
          },
          overflow: "none",
        },
        emphasis: {
          // show: true,
        },
        labelLine: {
          length: 50,
          show: false,
        },
        emphasis: {
          // show: true,
        },
        data: RealData,
        itemStyle: {
          shadowBlur: 25,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.2)",
        },
      },
    ],
  };

  statisticsECharts.on("mouseout", function (e) {
    clearInterval(timer);
    currentIndex = e.dataIndex;
  });
  statisticsECharts.setOption(option);
  //地图初始化后，定期刷新数据
  // animate();
};
const animate = () => {
  timer = setInterval(() => {
    const dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    statisticsECharts.dispatchAction({
      type: "downplay",
      seriesIndex: 1,
      dataIndex: currentIndex,
    });
    currentIndex = (currentIndex + 1) % dataLen;
    // 高亮当前图形
    statisticsECharts.dispatchAction({
      type: "highlight",
      seriesIndex: 1,
      dataIndex: currentIndex,
    });
  }, 2500);
};
/**
 * @description: 图表自适应
 */
const resize = () => {
  setTimeout(() => {
    screenHeight.value = document.body.clientHeight;
  }, 0);
  if (statisticsECharts) {
    statisticsECharts.resize();
  }
};
defineExpose({ resize, accept });
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.statistics-section {
  position: relative;
  width: 100%;
  height: calc(100% - 30px);
  padding: 10px 0;
  .charts-info {
    width: 100%;
    height: 100%;
    display: flex;
  }
  #statisticsCharts {
    position: relative;
    width: 50%;
    height: 100%;
    background: url("@/assets/images/circular.png") no-repeat;
    background-size: contain;
    background-position: 50% 50%;
  }
  .circular {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 25%;
    width: 8vh;
    height: 8vh;
    background: url("@/assets/images/chartcircular.png") no-repeat;
    background-size: 100% 100%;
    transform: translate(-50%, -52%);
    color: #ffffff;
    font-family: DigifaceWide;
    .text {
      font-size: 12px;
    }
    .num {
      text-shadow: 0 0 10px #1b8fbd, 0 0 20px #1b8fbd, 0 0 30px #1b8fbd,
        0 0 40px #1b8fbd;
    }
  }
  .colorBg {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background-color: rgba(255, 87, 87, 1);
  }
  .info {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    // overflow-y: scroll;
  }
  // 隐藏滚动条
  .scroll {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .li {
    display: flex;
    color: #fff;
    font-size: 12px;
    align-items: center;
    padding: 5px 0;
    .name {
      width: 90px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .textColo {
      width: 30px;
    }
    &:last-child {
      .colorBg {
        background-color: rgba(80, 196, 236, 1);
      }
    }
  }
  p {
    width: 30%;
  }
}
</style>
